<template>
    <div style="padding: 10px 25px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- <el-tab-pane label="进度更新记录" name="second">
                <el-timeline class="record">
                    <el-timeline-item
                            v-for="(item, index) in activities"
                            :key="index"
                            placement="top"
                            :color="item.color"
                            :timestamp="item.operaDateStr + ' '  +  item.operaName"
                    >
                        {{item.operaLog}}
                    </el-timeline-item>
                </el-timeline>
            </el-tab-pane> -->
            <el-tab-pane label="进度更新记录" name="first">
                <div class="schedule" v-for="(item,index) in scheduleData" :key="item.time + index">
                    <p class="time">{{item.updateDate}} {{item.userName}}</p>
                    <div class="details">
                        <p class="rate">进度：更新进度为{{item.scheduleUpdate * 100 + '%'}}</p>
                        <p class="illustrate">说明：<span v-if="item.remark">{{item.remark}}</span><span v-else>无</span></p>
                        <p class="annex">附件：<span class="annex-item" @click="download(it)" v-for="it in item.attachmentList" :key="it.fileUrl" style="margin-left:5px;margin-right:5px">{{it.filename}}</span><span v-if="!item.attachmentList">无</span>
                            </p>
                    </div>
                    <span class="circle"></span>
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="任务" name="first" > -->
                <el-tab-pane label="任务反馈" name="second" >
                <reply
                        v-if="basicData"
                        :basicData="basicData"
                        :isBtn="false"
                        @on-click-reply="handleReply"
                        ref="replyP"
                        :size="size"
                        :indexIpt="ipt"
                ></reply>
                <template>
                    <div style="margin-top: 20px">
                        <div class="reply-list" v-for="(item,index) in replyData" :key="index">
                            <div class="head-portrait">
                                <img v-if="item.replyUserHeadImage" :src="item.replyUserHeadImage" alt="">
                            </div>
                            <div class="info">
                                <div class="info-content">
                                    <div class="top-info">
                                    <span class="name-date">
                                        {{item.replyUser}} &nbsp; {{item.replyDate}}
                                    </span>
                                        <div class="reply-btn" v-if="basicData.state != '已完成'">
                                            <!-- <i class="el-icon-alarm-clock"></i>
                                             <span class="solid">|</span>-->
                                            <span class="reply" v-if="!item.replyId"
                                                  @click="changeReply(item,'child')" >回复</span>
                                        </div>
                                    </div>
                                    <div class="reply-content">
                                        <p class="p-reply">{{item.content}}</p>
                                        <div class="p-file" v-if="item.attachmentList.length > 0">
                                            <span> <i
                                                    class="el-icon-document"></i> ({{item.attachmentList.length}})</span>
                                            <ul>
                                                <li v-for="(f,index) in item.attachmentList" :key="index"
                                                    @click="downloadFile(f)">
                                                    {{f.filename}}
                                                </li>
                                            </ul>
                                        </div>
                                        <template>
                                            <div class="children-info" v-for="(c,idx) in item.children" :key="idx">
                                                 <span class="name-date">
                                                    {{c.replyUser}} &nbsp; {{c.replyDate}}
                                                 </span>
                                                <p class="p-reply">{{c.content}}</p>
                                                <div class="p-file" v-if="c.attachmentList.length > 0">
                                                    <span> <i class="el-icon-document"></i> ({{c.attachmentList.length}})</span>
                                                    <ul>
                                                        <li v-for="(f,index) in c.attachmentList" :key="index"
                                                            @click="downloadFile(f)">
                                                            {{f.filename}}
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <template v-if="isReplyShow">
                                                <reply v-if="item.isReplyShow && isReplyShow && basicData"
                                                       ref="reply"
                                                       :basicData="basicData"
                                                       :size="size"
                                                       :isBtn="true"
                                                       :indexIpt="index + 1"
                                                       @on-close="clickClose"
                                                       @on-click-reply="handleReply"
                                                ></reply>
                                            </template>

                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>

            </el-tab-pane>
            <!-- <el-tab-pane label="日志" name="second"> -->
                <!-- <el-tab-pane label="日志记录" name="third">
                <el-timeline class="log">
                    <el-timeline-item
                            v-for="(item, index) in activities"
                            :key="index"
                            placement="top"
                            :color="item.color"
                            :timestamp="item.operaDateStr + ' '  +  item.operaName"
                    >
                        {{item.operaLog}}
                    </el-timeline-item>
                </el-timeline>
            </el-tab-pane> -->
        </el-tabs>

    </div>
</template>

<script>
    import {taskinfo} from "../../mixins/taskinfo";
    import d from "../../utils/url";
    import Reply from "../../components/reply";
    import {deepClone} from "../../utils/index";
    import moment from 'moment'

    export default {
        components: {Reply},
        mixins: [taskinfo],
        name: "linkUpRecord",
        props: {
            id: {
                type: String,
                default: '',
            },
            basicData: {
                type: Object,
                default: function () {
                    return {}
                }
            }
        },
        data() {
            return {
                // scheduleData:[
                //     {
                //         date:"2023-10-21 10:02",
                //         naem:'张三',
                //         schedule:'20%'
                //     },
                //     {
                //         date:"2023-10-21 10:02",
                //         naem:'张三',
                //         schedule:'20%'
                //     },{
                //         date:"2023-10-21 10:02",
                //         naem:'张三',
                //         schedule:'20%'
                //     }
                // ],
                scheduleData:[],
                ipt: 0,
                replyKey: 1,
                replyData: [],
                activities: [],
                isBtn: false,
                isReplyShow: false,
                replyId: null,
                content: '',
                size: 52428800,// 限制文件大小
                type: 'prent',//回复 新增还是回复
            }
        },
        mounted() {
            this.loadReply();
            this.loadLog();
            this.taskProgress()
        },

        methods: {
            // 下载附件
            download(item) {
                console.log('item',item)
                window.location.href = encodeURI(`/seeyon/rest/attachment/file/${encodeURI(item.fileUrl)}?fileName=${encodeURI(item.filename)}`);
                },
                

            //加载回复数据
            loadReply() {
                this.$http.query(`/seeyon/rest/bhtTaskComment/comments/${this.id}?option.n_a_s=1`).then((res) => {
                    let {data} = res;
                    this.replyData = data;
                })
            },
            //加载日志数据
            loadLog() {
                this.$http.query(`/seeyon/rest/taskDetail/logs/${this.id}`).then((res) => {
                    let {data} = res;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].operaLog.indexOf('超期') != -1) {
                            data[i].color = '#E80012'
                        } else if (data[i].operaLog.indexOf('预警') != -1) {
                            data[i].color = '#F5BF0E'
                        } else {
                            data[i].color = '#0bbd87'
                        }
                    }
                    this.activities = data;
                })
            },
            // 获取进度更新记录
            taskProgress(){
                this.$http.query(`/seeyon/rest/taskDetail/schedule/${this.id}`).then((res) => {
                    console.log('获取进度更新记录',res)
                    let {data} = res;
                    this.scheduleData = data;
                    console.log('this.scheduleData',this.scheduleData)
                })
            },
            handleClick(tab, event) {

            },

            //添加回复内容
            handleReply(value, nameIds) {
                var loading = null;
                this.content = value;
                let vueComponent = null;
                let formData = new FormData()
                if (this.type == 'prent') {
                    this.replyId = null;
                    vueComponent = this.$refs['replyP'];
                    let list = vueComponent.getFileList();
                    for (let i = 0; i < list.length; i++) {
                        formData.append('file', list[i].raw)
                    }
                } else {
                    vueComponent = this.$refs['reply'];
                    let list = vueComponent[0].getFileList();
                    for (let i = 0; i < list.length; i++) {
                        formData.append('file', list[i].raw)
                    }
                }

                let param = {
                    "taskId": this.id,
                    "content": this.content,
                    remind: nameIds,
                    "attachments": "", // 上传附件的返回值
                    "parentId": this.replyId // 父回复的id,直接回复的任务则传空
                }

                if (formData.keys().next().value == 'file') {
                    loading = this.$loading({
                        lock: true,
                        text: '文件上传中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    this.$http.post(`/seeyon/rest/attachment?applicationCategory=0&extensions=&firstSave=true`, formData).then((res) => {
                        let atts = res.atts;
                        let attsArray = []
                        for (let i = 0; i < atts.length; i++) {
                            attsArray.push(atts[i].fileUrl);
                        }
                        param.attachments = attsArray.join(',')
                        this.saveData(param, loading);

                    })
                } else {
                    this.saveData(param, loading);
                }


            },

            //保存回复
            saveData(param, loading, ids) {
                this.$http.post(`/seeyon/rest/bhtTaskComment/addReplyRecord`, param).then((res) => {
                    if (loading != null) {
                        loading.close()
                    }
                    this.type = 'prent'
                    this.type == 'prent' ? this.$refs['replyP'].clearFiles() : this.$refs['reply'].clearFiles()
                    this.loadReply();
                })
            },

            downloadFile(file) {
                //let createData = moment(file.createdate).format('YYYY-MM-DD')
                window.location.href = encodeURI(`/seeyon/rest/attachment/file/${encodeURI(file.fileUrl)}?fileName=${encodeURI(file.filename)}`)
            },

            //回复弹出框
            changeReply(d) {
                this.isReplyShow = false
                this.replyId = d.id;
                for (let i = 0; i < this.replyData.length; i++) {
                    let temp = this.replyData[i];
                    temp.isReplyShow = temp.id == d.id ? true : false;
                }
                this.isReplyShow = true;
                this.obj = deepClone(this.obj)
                this.isBtn = true;
                this.type = 'child'
                this.count++
            },

            //关闭回复
            clickClose(val) {
                this.isReplyShow = false
            },
        }
    }
</script>

<style lang="scss" scoped>
    .annex-item{
        cursor: pointer;
        padding: 2px 5px;
    }
    .annex-item:hover{
        color: skyblue;
        background-color: gray;
    }
    .schedule{
        width: 100%;
        position: relative;
        padding: 0 50px;
        box-sizing: border-box;
        margin-bottom: 10px;
        .time{
            width: 100%;
            // line-height: 40px;
        }
        .details{
            width: 100%;
        }
        .circle{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            left: 18px;
            top: 6px;
        }
    }

    .reply-list {
        width: 100%;
        min-height: 120px;
        border-bottom: 1px solid #ECECEC;

        display: flex;
        justify-content: space-between;

        .head-portrait {
            width: 50px;
            height: 50px;
            border-radius: 50px;
            margin-top: 20px;
            margin-left: 30px;

            img {
                width: 50px;
                height: 50px;
                border-radius: 50px;
            }
        }

        .info {
            width: calc(100% - 100px);
            min-height: 100px;

            .name-date {
                color: #7B7B7B;
                font-size: 14px;
            }


            .info-content {
                width: 100%;
                height: calc(100% - 60px);

                margin-top: 30px;

                .top-info {
                    width: 100%;
                    height: 30px;
                    display: flex;
                    justify-content: space-between;


                    .reply-btn {
                        i {
                            font-size: 24px;
                            padding-top: 3px;
                            color: #C2C5C5;
                            cursor: pointer;

                            &:hover {
                                color: #66B1FF;
                            }
                        }

                        margin-right: 20px;
                        width: 100px;
                        height: 30px;
                        font-size: 16px;
                        display: flex;
                        justify-content: space-between;

                        .solid {
                            color: #C2C5C5;
                        }

                        .reply {
                            cursor: pointer;
                            color: #66B1FF;

                            &:hover {
                                color: #007EE5;
                            }
                        }
                    }

                }

                .p-reply {
                    word-wrap: break-word;
                    word-break: normal;
                    white-space: normal;
                    font-size: 15px;
                    padding: 20px 0;
                }

                .p-file {
                    color: #66B1FF;
                    font-size: 16px;
                    display: flex;
                    justify-content: flex-end;

                    ul {
                        display: flex;
                        justify-content: end;
                        flex-wrap: wrap;
                        width: calc(100% - 100px);
                        margin-left: 20px;

                        li {
                            width: 200px;
                            padding-right: 30px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            font-size: 14px;
                            cursor: pointer;

                            &:hover {
                                color: #007EE5;
                            }
                        }
                    }
                }

                .children-info {
                    border-top: 1px solid #ECECEC;
                    /* padding: 20px 0;*/
                }
            }
        }

    }

    .log {
        min-width: 200px;
        margin-left: 10px;
    }

</style>
